<template>
  <section class="content">
  <div class="creat-order-container">
    <!--名称-->
    <div class="title-box">
      <p class="page-title">{{isEdited ? '编辑订单':'新增订单'}}</p>
    </div>
     <!--订单信息-->
    <div class="order-info-box">
      <div class="title-name">
        <p class="name">订单信息 <i @click="infoShow = !infoShow" style="float: right" :class="infoShow ? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></p>
      </div>
      <div v-if="infoShow" class="info-order">
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span class="need">订单编号：</span></p>
              <div class="content-desc" v-if="isEdited">{{orderInfo.platformOrderId}}</div>
              <el-input v-model.trim="orderInfo.platformOrderId"
                        v-if="!isEdited"
                        placeholder=""></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="need">订单时间：</span></p>
              <div class="content-desc" v-if="isEdited">{{orderInfo.orderTime}}</div>
              <el-date-picker v-if="!isEdited"  v-model="orderInfo.orderTime" placeholder="输入订单时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"></el-date-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span> 销售记录号：</span></p>
              <el-input v-model.trim="orderInfo.record"  placeholder=""></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="need">币种：</span></p>
              <el-select v-model="orderInfo.currency" placeholder="请选择币种">
                <el-option v-for="item in currencyList" :key="item.codeValue" :label="item.codeValue" :value="item.codeValue"></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span class="need"> 订单渠道：</span></p>
              <div class="content-desc" v-if="isEdited">{{handleChoseChannel(orderInfo.orderChannelSelect)}}</div>
              <el-select  v-if="!isEdited" v-model="orderInfo.orderChannelSelect" @change="changeChanner" placeholder="请选择订单渠道">
                <el-option v-for="item in orderInfo.orderChannel" :key="item.id" :label="item.platformName" :value="item.id"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="need">店铺：</span></p>
              <div class="content-desc" v-if="isEdited">{{orderInfo.storeName}}</div>
              <el-select v-if="!isEdited" :disabled="disabled" v-model="orderInfo.storeSelect" @change="changeShop" placeholder="请选择店铺">
                <el-option v-for="item in orderInfo.store" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span class="need"> 订单金额：</span></p>
              <el-input v-model.trim="orderInfo.loansReceivable" placeholder="保留2位小数"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span >邮资：</span></p>
              <el-input  v-model.trim="orderInfo.thePostageReceivable"  placeholder="保留2位小数"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span> 平台费用：</span></p>
              <el-input v-model.trim="orderInfo.costOfPlatform" placeholder="保留2位小数"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="">转帐费：</span></p>
              <el-input v-model.trim="orderInfo.transitionFee"  placeholder="保留2位小数"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span class="need"> 收款账号：</span></p>
              <el-select  v-model="orderInfo.shroffAccountNum" placeholder="请选择收款账户">
                <el-option v-for="item in accoutList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span>付款时间：</span></p>
              <el-date-picker v-model="orderInfo.payTime" type="datetime" placeholder="请输入付款时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span> 退补类型：</span></p>
              <el-select v-model="orderInfo.treatType" placeholder="请选择退补类型">
                <el-option v-for="item in retreatingType" :key="item.code" :label="item.codeValue" :value="item.code"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="">退补金额：</span></p>
              <el-input v-model.trim="orderInfo.treatMoney"  placeholder=""></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content" style="height: 40px;">
              <p><span class="need"> 申报类型：</span></p>
              <el-radio-group v-model="orderInfo.orderType">
                <el-radio :label="1">9610模式</el-radio>
                <el-radio :label="0">非9610报关单模式</el-radio>
                <!--<el-radio :label="2">非9610物流单模式</el-radio>-->
              </el-radio-group>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p><span :class="orderInfo.orderType == 1 ? 'need':''"> 支付交易流水号：</span></p>
              <el-input v-model.trim="orderInfo.payNo"  placeholder="支付交易流水号"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span :class="orderInfo.orderType == 1 || orderInfo.orderType == 2 ? 'need':''"> 物流渠道：</span></p>
              <el-select v-model="orderInfo.logistics" placeholder="请选择">
                <el-option v-for="item in logisticsList" :key="item.code" :label="item.codeValue" :value="item.code"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span :class="orderInfo.orderType == 2 ? 'need':''">物流单号：</span></p>
              <el-input v-model.trim="orderInfo.billCode" placeholder="物流单号"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span> 分运单号：</span></p>
              <el-input v-model.trim="orderInfo.assbillNo"  placeholder="分运单号"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
            <p><span> 大包裹号：</span></p>
            <el-input v-model="orderInfo.bigPackageNo"  placeholder="大包裹号"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <p><span> 小包数量：</span></p>
              <el-input v-model.trim="orderInfo.smallPackageNo"  placeholder="小包数量"></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span>申报关区代码：</span></p>
              <el-input v-model.trim="orderInfo.customsNo" placeholder="申报关区代码"></el-input>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--留言和备注-->
    <div class="message-remark">
      <div class="left-message">
        <div class="title-name">
          <p class="name">平台留言 <i @click="platShow = !platShow" style="float: right" :class="platShow ? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></p>
        </div>
        <div class="text-area" v-if="platShow">
          <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model.trim="message"></el-input>
        </div>

      </div>
      <div class="right-remark">
        <div class="title-name" >
          <p class="name">订单备注 <i @click="markShow = !markShow" style="float: right" :class="markShow ? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></p>
        </div>
        <div class="text-area" v-if="markShow">
          <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model.trim="remark"></el-input>
        </div>

      </div>
    </div>
    <!--客户信息-->
    <div class="client-info">
      <div class="title-name">
        <p class="name">客户信息 <i @click="clientShow = !clientShow" style="float: right" :class="clientShow ? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></p>
      </div>
      <div v-if="clientShow" class="client-content">
        <el-row>
          <el-col :span="12" class="client-padding">
            <div class="grid-content">
              <p><span class="need">客户ID：</span></p>
              <div class="content-desc" v-if="isEdited">{{customerInfo.buyerId}}</div>
              <el-input  v-if="!isEdited" v-model.trim="customerInfo.buyerId" placeholder=""></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="need">客户姓名：</span></p>
              <div class="content-desc" v-if="isEdited">{{customerInfo.firstName}}-{{customerInfo.lastName}}</div>
              <div class="client"  v-if="!isEdited">
                <el-input class="client-name" v-model.trim="customerInfo.firstName" placeholder="firstName" style="width: 100%"></el-input> -  <el-input class="client-name" style="width: 100%" v-model="customerInfo.lastName" placeholder="lastName"></el-input>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="client-padding">
            <div class="grid-content">
              <p><span class="need">收货人：</span></p>
              <div class="client">
                <el-input class="client-name" v-model.trim="customerInfo.receiverFirstName" placeholder="firstName" style="width: 100%"></el-input> -  <el-input class="client-name" style="width: 100%" v-model.trim="customerInfo.receiverLastName" placeholder="lastName"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="client-padding">
            <div class="grid-content">
              <p><span class="need">联系电话：</span></p>
              <el-input v-model.trim="customerInfo.contactNumFrist"  placeholder=""></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span>联系电话2：</span></p>
              <el-input v-model.trim="customerInfo.contactNumSec"  placeholder=""></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="client-padding">
            <div class="grid-content">
              <p><span class="need">联系邮箱：</span></p>
              <el-input v-model.trim="customerInfo.contactEmail" placeholder=""></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="need">所属国家：</span></p>
              <el-select v-model="customerInfo.homeCountrySelectCode" placeholder="请选择所属国家" @change="handleDealCountry">
                <el-option v-for="item in customerInfo.homeCountry" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="client-padding">
            <div class="grid-content">
              <p><span class="">省/州：</span></p>
              <el-input v-model.trim="customerInfo.provincialState" placeholder=""></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="">所属城市：</span></p>
              <el-input v-model.trim="customerInfo.city" placeholder="所属城市"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="client-padding">
            <div class="grid-content">
              <p><span>邮编：</span></p>
              <el-input v-model.trim="customerInfo.postcode"  placeholder=""></el-input>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <p class="second"><span class="">门牌号：</span></p>
              <el-input v-model.trim="customerInfo.houseNum" placeholder=""></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <p style="min-width: 150px;max-width: 150px;"><span class="need">邮寄地址：</span></p>
              <el-input v-model.trim="customerInfo.mailingAddress" placeholder=""></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <p style="min-width: 150px;max-width: 150px;"><span>备用地址：</span></p>
              <el-input v-model.trim="customerInfo.standbyAddress" placeholder=""></el-input>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="goods-info">
      <div class="title-name">
        <p class="name">商品信息 <i @click="goodsShow = !goodsShow" style="float: right" :class="goodsShow ? 'el-icon-arrow-down':'el-icon-arrow-up'"></i></p>
      </div>
      <div v-if="goodsShow" class="goods-table">
        <div class="add-goods">
          <el-button type="primary" @click="addPdocutc">添加商品</el-button>
        </div>
        <el-table :data="productInfo.productList"  style="width: 100%">
          <el-table-column prop="erpSku" label="商品SKU" width="240">
            <template slot-scope="scope">
              <el-input placeholder="请输入内容"  v-model.trim="scope.row.erpSku" class="input-with-select">
                <el-button type="primary"   v-if="!modal"
                           @click="chooseProduct(scope.$index)" slot="append">选择</el-button>
                <el-button type="primary"  data-toggle="modal" v-if="modal"  data-target="#modal-default"
                           @click="chooseProduct(scope.$index)" slot="append">选择</el-button>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column prop="sku" label="平台SKU" width="180">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.sku" disabled placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.price"  placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="发货数量">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.quantity"  placeholder=""></el-input>
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <i class="el-icon-delete"  @click="deleteProduct(scope.$index)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="modal fade" id="modal-default">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">选择商品</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal">
              <div class="">
                <div class="form-group">
                  <div class="col-sm-12 flex">
                    <label for="" class="control-label min-width">系统SKU：</label>
                    <div class="inline-block">
                      <input type="text" class="form-control pull-left" v-model="productParams.erpSku"
                              placeholder="请输入商品编码">
                      <el-button type="success" @click="searchProduct">搜&nbsp;索</el-button>
                      <el-button type="info" @click="resetProduct">重&nbsp;置</el-button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-12">
                    <table id="example4" class="table table-bordered table-hover marginNonde">
                      <thead>
                      <tr>
                        <th>
                          <label>
                            <!--<input type="checkbox" class="flat-red">-->
                          </label>
                        </th>
                        <th>商品图片</th>
                        <th>商品信息</th>
                        <th>平台</th>
                        <th>平台SKU</th>
                      </tr>
                      </thead>
                      <tbody>
                         <tr v-for="( productListItem,index) in addPdocutcList" :key="index">
                        <td>
                          <label>
                           <!-- <el-checkbox :id="index" :label="JSON.stringify(productListItem)">{{}}</el-checkbox>-->
                            <input  type="checkbox" class="flat-red" autocomplate="off"  :value="productListItem" v-model="checkProduct"/>
                          </label>
                        </td>
                        <td>
                          <img :src="productListItem.goods_pic" alt="">
                        </td>
                        <td class="text-left">
                          <label class="m-l-10">
                            <p>
                              <label>系统SKU：</label>
                              <span>{{productListItem.erpSku}}</span>
                            </p>
                            <p>
                              <label>商品名称：</label>
                              <span>{{productListItem.goods_cn}}</span>
                            </p>
                            <p>
                              <label>品牌名称：</label>
                              <span>{{productListItem.brand_name}}</span>
                            </p>
                          </label>
                        </td>
                        <td>{{handleChoseChannel(productListItem.channel)}}</td>
                        <td>{{productListItem.sku}}</td>
                      </tr>
                      </tbody>
                    </table>
                    <template class="clearfix">
                      <div class="m-t-15 pull-right">
                        <el-pagination
                          background
                          layout="prev, pager, next"
                          :current-page="pages.current"
                          @current-change="pagechange"
                          :page-count="pages.total">
                        </el-pagination>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <el-button v-if="checkProduct.length == 1"  @click="submitProduct" data-dismiss="modal" type="primary">保存</el-button>
            <el-button  v-else  @click="submitProduct"  type="primary">保存</el-button>
            <el-button data-dismiss="modal">关闭</el-button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <transition name="fade">
      <div v-if="errorShow" class="gritter-notice-wrapper " :class="{'success-notice-wrapper':errorClass}">
        <div id="gritter-item-4" class="gritter-item-wrapper gritter-error" style="" role="alert">
          <div class="gritter-item"><a class="gritter-close" tabindex="1" @click="closeError"><i
            class="fa fa-close"></i></a>
            <div class="gritter-without-image"><span class="gritter-title">{{errorTitle}}</span>
              <p>{{errorMsg}}</p></div>
          </div>
        </div>
      </div>
    </transition>
    <div class="buttons">
      <el-button type="primary" @click="submitOrderDetail(1)">确认</el-button>
      <el-button type="primary" v-if="!isEdited" @click="continueAddOrderDetail(2)">继续添加</el-button>
      <el-button @click="closeBack">返回</el-button>
    </div>
  </div>
<!--    <section class="content">

      <div class="row form-group">
        <div class="col-xs-8">
          <div class="box">
            <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
              <h3 class="box-title">订单信息</h3>
            </div>
            &lt;!&ndash; /.box-header &ndash;&gt;
            <div class="box-body" style="overflow: hidden">
              <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                <div class="col-sm-6 flex">
                  <label class="control-label min-width"><sub class="text-red">*</sub>订单编号：</label>
                  <div class="inline-block">
                    <input type="text" class="form-control" v-model="orderInfo.platformTransactionNum">
                  </div>
                </div>
                <div class="col-sm-6 flex">
                  <label class="control-label min-width"><sub class="text-red">*</sub>订单时间：</label>
                  <div class="inline-block">
                    <el-date-picker class="linehe"
                                    v-model="orderInfo.orderTime"
                                    type="datetime"
                                    placeholder="输入订单时间" format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                    &lt;!&ndash;<input type="text" placeholder="输入订单时间" class="form-control" v-model="orderInfo.orderTime">&ndash;&gt;
                  </div>
                </div>

              </div>
              <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                <div class="col-sm-6 flex">
                  <label class="control-label min-width"><sub class="text-red">*</sub>订单渠道：</label>
                  <div class="inline-block">
                    <select class="form-control" v-model="orderInfo.orderChannelSelect" @change="changeChanner">
                      <option value="">请选择平台</option>
                      <option :value="orderChannelItem.id" v-for="orderChannelItem in orderInfo.orderChannel">
                        {{orderChannelItem.platformName}}
                      </option>
                    </select>
                  </div>
                </div>
                <div class="col-sm-6 flex">
                  <label class="control-label min-width"><sub class="text-red">*</sub>店铺：</label>
                  <label class="payment" v-if="orderInfo.store.length == 0">
                    <i class="fa fa-warning"></i>
                    您当前还未添加店铺
                    <router-link to="/v1/author/getPlatFrom"><a class="text-red text-bold" target="_blank">【立即添加】</a>
                    </router-link>
                  </label>
                  <div class="inline-block" v-else>
                    <select :disabled="disabled" class="form-control pull-left" style="width: 84%"
                            v-model="orderInfo.storeSelect" @change="changeShop">
                      <option value="">请选择店铺</option>
                      <option :value="storeItem.id" v-for="storeItem in orderInfo.store">{{storeItem.name}}</option>
                    </select>
                    &lt;!&ndash;<router-link to="/v1/author/getShoplist"><label class="control-label curren text-green pull-right" style="padding-right: 0;">店铺管理</label></router-link>&ndash;&gt;
                  </div>
                </div>
              </div>
              <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                <div class="col-sm-6 flex">
                  <label class="control-label min-width"><sub class="text-red">*</sub>应收货款：</label>
                  <div class="inline-block">
                    <div class="input-group">
                      <input type="text" class="form-control" v-model="orderInfo.loansReceivable"><span
                      class="input-group-addon">USD</span>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 flex">
                  <label class="control-label min-width">应收邮资：</label>
                  <div class="inline-block">
                    <div class="input-group">
                      <input type="text" class="form-control" v-model="orderInfo.thePostageReceivable"><span
                      class="input-group-addon">USD</span>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                <div class="col-sm-6 flex">
                  <label class="control-label min-width">平台费用：</label>
                  <div class="inline-block">
                    <div class="input-group">
                      <input type="text" class="form-control" v-model="orderInfo.costOfPlatform"><span
                      class="input-group-addon">USD</span>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 flex">
                  <label class="control-label min-width">转账费：</label>
                  <div class="inline-block">
                    <div class="input-group">
                      <input type="text" class="form-control" v-model="orderInfo.transitionFee"><span
                      class="input-group-addon">USD</span>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                <div class="col-sm-6 flex">
                  <label class="control-label min-width">收款账号：</label>
                  <div class="inline-block">
                    <select :disabled="accountDisabled" class="form-control" v-model="orderInfo.shroffAccountNum">
                      <option value="">请选择收款账号</option>
                      <option :value="orderChannelItem" v-for="orderChannelItem in accoutList">{{orderChannelItem}}
                      </option>
                    </select>
                  </div>
                </div>
                <div class="col-sm-6 flex">
                  <label class="control-label min-width">付款时间：</label>
                  <div class="inline-block">
                    <div class="">
                      <el-date-picker
                        v-model="orderInfo.payTime"
                        type="datetime"
                        placeholder="请输入付款时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
                      </el-date-picker>
                      &lt;!&ndash;<input  type="text" class="form-control" v-model="orderInfo.payTime" id="payTime" placeholder="请输入付款时间">&ndash;&gt;
                    </div>
                  </div>
                </div>
              </div>
            </div>
            &lt;!&ndash; /.box-body &ndash;&gt;
          </div>
          &lt;!&ndash; /.box &ndash;&gt;
        </div>
      </div>

      <div class="row form-group">
        <div class="col-xs-8">
          <div class="box">
            <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
              <h3 class="box-title p-lr-10">客户信息</h3>
            </div>
            &lt;!&ndash; /.box-header &ndash;&gt;
            <div class="box-body" style="overflow: hidden">
              <div>
                <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width"><sub class="text-red">*</sub>客户ID：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.customerID">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width"><sub class="text-red">*</sub>客户姓名：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control pull-left" style="width: 47%"
                               v-model="customerInfo.firstName"><span class="pull-left"
                                                                      style="width: 6%;text-align:center;line-height: 34px">-</span>
                        <input type="text" class="form-control pull-right" style="width: 47%"
                               v-model="customerInfo.lastName">
                      </div>
                    </div>
                  </div>
                </div>
                <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width">联系电话1：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.contactNumFrist">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width">联系电话2：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.contactNumSec">
                      </div>
                    </div>
                  </div>
                </div>
                <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width">联系邮箱：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.contactEmail">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width"><sub class="text-red">*</sub>所属国家：</label>
                    <div class="inline-block">
                      <div class="">
                        <select class="form-control" v-model="customerInfo.homeCountrySelect">
                          <option value="">请选择国家</option>
                          <option :value="homeCountryItem" v-for="homeCountryItem in customerInfo.homeCountry">
                            {{homeCountryItem.name}}
                          </option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width">省/州：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.provincialState">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width">所属城市：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.city">
                      </div>
                    </div>
                  </div>
                </div>
                <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width">邮编：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.postcode">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6 flex">
                    <label class="control-label min-width">门牌号：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.houseNum">
                      </div>
                    </div>
                  </div>
                </div>
                <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                  <div class="col-sm-12 flex">
                    <label class="control-label min-width"><sub class="text-red">*</sub>邮寄地址：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.mailingAddress">
                      </div>
                    </div>
                  </div>
                </div>
                <div style="padding: 4px 0;border-bottom: 1px solid #f4f4f4" class="row">
                  <div class="col-sm-12 flex">
                    <label class="control-label min-width">备用地址：</label>
                    <div class="inline-block">
                      <div class="">
                        <input type="text" class="form-control" v-model="customerInfo.standbyAddress">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            &lt;!&ndash; /.box-body &ndash;&gt;
          </div>
          &lt;!&ndash; /.box &ndash;&gt;
        </div>
      </div>


      <div class="row form-group">
        <div class="col-xs-8">
          <div class="box">
            <div class="box-header" style="border-bottom: 1px solid rgb(226, 225, 225)">
              <h3 class="box-title">商品信息</h3>
              <button class="btn btn-primary pull-right" @click="addPdocutc">添加商品</button>
            </div>
            &lt;!&ndash; /.box-header &ndash;&gt;
            <div class="box-body" style="overflow: hidden">
              <table class="table table-bordered">
                <thead class="bg-info">
                <tr>
                  <th>
                    <input type="checkbox">
                  </th>
                  <th style="width: 25%"><sub class="text-red">*</sub>库存商品</th>
                  <th style="width: 15%">平台sku</th>
                  <th style="width: 15%;">单价</th>
                  <th style="width: 20%;">发货仓库</th>
                  <th style="width: 10%">发货数量</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-if="productInfo.productList.length == 0">
                  <td colspan="7">
                    没有数据
                  </td>
                </tr>
                <tr v-else v-for="(productListItem,index) in productInfo.productList" :key="index">
                  <td>
                    <input type="checkbox">
                  </td>
                  <td>
                    <div class="flex">
                      <label class="control-label" v-if="productListItem.pic"
                             style="display: flex;align-items: center;">
                        <img :src="productListItem.pic">
                      </label>
                      <div class="inline-block text-left">
                        <div>
                          <div class="input-group">
                            <input class="form-control" placeholder="" v-model="productListItem.sku" disabled>
                            <span class="input-group-addon bg-green curren" data-toggle="modal"
                                  data-target="#modal-default" @click="chooseProduct(index)">更换</span>
                          </div>
                          <p class="m-t-15" v-if="productListItem.productInfo">{{productListItem.productInfo}}</p>
                        </div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <input type="text" class="form-control" v-model="productListItem.ebaySKU">
                  </td>
                  <td :class="">
                    <input type="text" class="form-control" v-model="productListItem.unitPrice">
                  </td>
                  <td>
                    <select class="form-control" v-model="productListItem.warehouseSelect"
                            @change="chooseWh(productListItem.warehouseSelect)">
                      <option value="">请选择发货仓库</option>
                      <option v-for="warehouseItem in productListItem.warehouse" :value="warehouseItem.whId">
                        {{warehouseItem.whName}}({{warehouseItem.stockQty}})
                      </option>
                    </select>
                  </td>
                  <td :class="">
                    <input type="text" class="form-control" v-model="productListItem.shipmentsNum"
                           @blur="blurShipmentsNum(index)">
                  </td>
                  <td>
                    <span class="text-blue curren" @click="addInventory(productListItem)">添加库存商品</span>
                    <p>
                      <span class="text-red curren" @click="deleteProduct(index)">删除该商品</span>
                    </p>
                  </td>
                </tr>
                </tbody>
              </table>

              <div class="row text-center m-t-27">
                <button class="btn btn-primary m-lr-10" @click="submitOrderDetail">确认</button>
                <button class="btn btn-primary m-lr-10" @click="continueAddOrderDetail">继续添加</button>
                <router-link :to="{path:'/v1/order/0/list/1'}" class="text-white m-lr-10">
                  <button class="btn btn-default m-lr-10">返回</button>
                </router-link>
              </div>
            </div>
            &lt;!&ndash; /.box-body &ndash;&gt;
          </div>
          &lt;!&ndash; /.box &ndash;&gt;
        </div>
      </div>

      <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">选择商品</h4>
            </div>
            <div class="modal-body">
              <div class="form-horizontal">
                <div class="">
                  <div class="form-group">
                    <div class="col-sm-12 flex">
                      <label for="" class="control-label min-width">输入搜索：</label>
                      <div class="inline-block">
                        <input type="text" class="form-control pull-left" v-model="productParams.sku"
                               style="width: 350px" placeholder="请输入商品编码">
                        <button class="btn btn-success pull-left m-lr-10" @click="searchProduct">搜&nbsp;索</button>
                        <button class="btn btn-danger pull-left m-lr-10" @click="resetProduct">重&nbsp;置</button>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-12">
                      <table id="example4" class="table table-bordered table-hover marginNonde">
                        <thead>
                        <tr>
                          <th>
                            <label>
                              &lt;!&ndash;<input type="checkbox" class="flat-red">&ndash;&gt;
                            </label>
                          </th>
                          <th>商品图片</th>
                          <th>商品信息</th>
                          <th>库存总量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="productListItem in addPdocutcList">
                          <td>
                            <label>
                              <input type="checkbox" class="flat-red" :value="productListItem" v-model="checkProduct">
                            </label>
                          </td>
                          <td>
                            <img :src="productListItem.goodsPic" alt="">
                          </td>
                          <td class="text-left">
                            <label class="m-l-15">
                              <p>
                                <label>商品编码：</label>
                                <span>{{productListItem.sku}}</span>
                              </p>
                              <p>
                                <label>商品名称：</label>
                                <span>{{productListItem.goodsName}}</span>
                              </p>
                              <p>
                                <label>品牌名称：</label>
                                <span>{{productListItem.brandName}}</span>
                              </p>
                            </label>
                          </td>
                          <td>{{productListItem.countStock}}</td>
                        </tr>
                        </tbody>
                      </table>
                      <template class="clearfix">
                        <div class="m-t-15 pull-right">
                          <pagination :total="pages.total" :current-page='pages.current' :display="pages.display"
                                      @pagechange="pagechange"></pagination>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button v-if="checkProduct.length == 1" type="button" class="btn btn-primary" data-dismiss="modal"
                      @click="submitProduct">保存
              </button>
              <button v-else type="button" class="btn btn-primary" @click="submitProduct">保存</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
          </div>
          &lt;!&ndash; /.modal-content &ndash;&gt;
        </div>
        &lt;!&ndash; /.modal-dialog &ndash;&gt;
      </div>

      <transition name="fade">
        <div v-if="errorShow" class="gritter-notice-wrapper " :class="{'success-notice-wrapper':errorClass}">
          <div id="gritter-item-4" class="gritter-item-wrapper gritter-error" style="" role="alert">
            <div class="gritter-item"><a class="gritter-close" tabindex="1" @click="closeError"><i
              class="fa fa-close"></i></a>
              <div class="gritter-without-image"><span class="gritter-title">{{errorTitle}}</span>
                <p>{{errorMsg}}</p></div>
            </div>
          </div>
        </div>
      </transition>

    </section>-->
  </section>

</template>

<script>
  import manuallyCreateOrder from '../../js/order/manuallyCreateOrder'
  export default manuallyCreateOrder
</script>

<style  lang="less">

  .creat-order-container{
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
    border-radius:4px;
    border:1px solid rgba(228,231,237,1);
    padding-bottom: 40px;
    .buttons{
      text-align: center;
      margin-top: 40px;
    }
    .title-box{
      padding: 0 20px;
      .page-title{
        font-size:16px;
        font-weight:400;
        color:rgba(48,49,51,1);
        line-height: 63px;
        border-bottom: 1px solid #E4E7ED;
      }
    }
    .order-info-box{
      margin: 18px 20px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      border:1px solid rgba(228,231,237,1);
      .info-order{
        margin: 20px;
         .el-row{
           margin-bottom: 15px;
           .el-col{
             &:first-child{
               padding-right: 1%;
             }
           }
           .grid-content{
             p{
               min-width: 150px;
               display: inline-block;
               text-align: right;
               font-size:14px;
               font-weight:600;
               color:rgba(96,98,102,1);
               &.second{
                 min-width: 150px;
               }
               span.need{
                 display: inline-block;
                 position: relative;
                 &:before{
                   content: '*';
                   position: absolute;
                   left: -8px;
                   top: 0;
                   color: red;
                 }
               }

             }
             div.content-desc{
               display: inline-block;
               width: 100%;
               font-size: 14px;
             }
             display: flex;
             align-items: center;
             .el-select{
               width: 100%;
             }
             .el-input{
               width: 100%;
             }
             .el-radio-group{
               width: 100%;
               .el-radio{
                 margin-right: 10px;
                 display: inline-block;
               }
             }
           }
         }
      }
    }

    .message-remark{
     margin: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left-message,.right-remark{
        width: 49.166%;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
        border-radius:4px;
        border:1px solid rgba(228,231,237,1);
        .text-area{
          width: 100%;
          padding: 20px;
        }
      }
    }

    .client-info{
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      border:1px solid rgba(228,231,237,1);
      margin: 20px;
      .client-content{
        margin: 20px;
        .el-row{
          margin-bottom: 15px;
          .client-padding{
            padding-right: 1%;
          }
          .grid-content{
            p{
              min-width: 150px;
              display: inline-block;
              text-align: right;
              font-size:14px;
              font-weight:600;
              color:rgba(96,98,102,1);
              &.second{
                min-width: 150px;
              }
              span.need{
                display: inline-block;
                position: relative;
                &:before{
                  content: '*';
                  position: absolute;
                  left: -8px;
                  top: 0;
                  color: red;
                }
              }
            }
            span.content{
              color: #606266;
              font-size: 20px;
              display: inline-block;
            }
            display: flex;
            align-items: center;
            justify-content: left;
            .el-select{
              width: 100%;
            }
            .client{
              display: flex;
              align-items: center;
              width: 100%;
              .client-name{
                width: 48%;
              }
            }

            .el-radio-group{
              width: 100%;
              .el-radio{
                margin-right: 10px;
                display: inline-block;
              }
            }
          }
        }
      }
    }

    .goods-info{
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      border:1px solid rgba(228,231,237,1);
      margin: 0 20px 20px 20px;
      .goods-table{
        margin: 20px;
        .el-icon-delete{
          color: #409EFF;
          font-size: 20px;
        }
        .el-table{
          margin-top: 15px;
          thead{
            background-color: #F5F7FA;
            tr{
              background-color: #F5F7FA;
              th{
                background-color: #F5F7FA;
                height: 60px;
                line-height: 60px;
                text-align: center;
              }
            }
          }
          tbody{
            tr{
              td{
                text-align: center;
                .el-input{
                  width: 80%;
                }
              }
            }
          }
          .input-with-select{
            width: 200px !important;
          }
        }
      }
    }

    .title-name{
      position: relative;
      &:before{
        content: '';
        position: absolute;
        height: 62%;
        width: 1px;
        border-left: 2px solid #409EFF;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
      }
      line-height: 43px;
      padding: 0 18px;
      .name{
        font-size:16px;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height: 43px;
        border-bottom: 1px solid #E4E7ED;
        i{
          display: inline-block;
          line-height: 43px;
          color: #E4E7ED;
          font-size: 21px;
        }
      }
    }
    .modal-header{
      background: #fff;
      position: relative;
     /* &:after{
        content: '';
        position: absolute;
        height: 1px;
        width: 80%;
        border-bottom: 1px solid;
        bottom: 0;

      }*/
    }
    .modal-footer{
      text-align: center;
    }
    .form-horizontal{
      .form-control{
        width:320px;
        height:40px;
        background:rgba(255,255,255,1);
        border-radius:4px 4px 0px 4px;
        border:1px solid rgba(220,223,230,1);
        margin-right: 15px;
      }
      .el-button{
        width:68px;
        height:40px;
      }
      .table-bordered{
        border: none;
        thead{
          tr{
            th{
              height:60px;
              background:rgba(245,247,250,1);
              border: none;
            }
          }
        }
        tbody{
          tr{
            border-bottom:  1px solid #E4E7ED;
            td{
              border:none;
            }
          }
        }
      }
    }
  }
  .linehe > input{
    line-height: 34px!important;
    height: 36px!important;
  }
  .el-input__inner{
    line-height: 40px!important;
    height: 40px!important;
  }
  .el-date-editor.el-input{
    width: 100%!important;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  /* 火狐 */
  input{
/*    -moz-appearance:textfield;*/
  }
</style>
